<!--系统配置-->
<template>
  <div class="setting-drawer">
    <!-- 整体风格设置 -->
    <div :style="{ marginBottom: '24px' }">
      <h3 class="setting-drawer-index-title">整体风格设置</h3>
      <div class="setting-drawer-index-blockChecbox">
        <a-tooltip>
          <template slot="title">
            暗色菜单风格
          </template>
          <div class="setting-drawer-index-item" @click="handleMenuTheme('dark')">
            <img src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" alt="dark">
            <div class="setting-drawer-index-selectIcon" v-if="navTheme === 'dark'">
              <a-icon type="check"/>
            </div>
          </div>
        </a-tooltip>
        <a-tooltip>
          <template slot="title">
            亮色菜单风格
          </template>
          <div class="setting-drawer-index-item" @click="handleMenuTheme('light')">
            <img src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" alt="light">
            <div class="setting-drawer-index-selectIcon" v-if="navTheme !== 'dark'">
              <a-icon type="check"/>
            </div>
          </div>
        </a-tooltip>
      </div>
    </div>

    <!-- 导航模式 -->
    <div :style="{ marginBottom: '24px' }">
      <h3 class="setting-drawer-index-title">导航模式</h3>
      <div class="setting-drawer-index-blockChecbox">
        <a-tooltip>
          <template slot="title">
            侧边栏导航
          </template>
          <div class="setting-drawer-index-item" @click="handleLayout('inline')">
            <img src="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" alt="inline">
            <div class="setting-drawer-index-selectIcon" v-if="layoutMode === 'inline'">
              <a-icon type="check"/>
            </div>
          </div>
        </a-tooltip>
        <a-tooltip>
          <template slot="title">
            顶部栏导航
          </template>
          <div class="setting-drawer-index-item" @click="handleLayout('horizontal')">
            <img src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" alt="topmenu">
            <div class="setting-drawer-index-selectIcon" v-if="layoutMode !== 'inline'">
              <a-icon type="check"/>
            </div>
          </div>
        </a-tooltip>
      </div>
    </div>

    <!-- 主题色 -->
    <div>
      <h3 class="setting-drawer-index-title">主题色</h3>
      <div style="height: 20px">
        <a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList" :key="index">
          <template slot="title">
            {{ item.key }}
          </template>
          <a-tag :color="item.color" @click="changeColor(item.color)">
            <a-icon type="check" v-if="item.color === primaryColor"></a-icon>
          </a-tag>
        </a-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
import { updateTheme, colorList } from './settingConfig'
import { mapState } from 'vuex'

export default {
  components: {},
  data () {
    return {
      colorList
    }
  },
  computed: {
    ...mapState({
      primaryColor: state => state.app.color,
      navTheme: state => state.app.theme,
      layoutMode: state => state.app.layout
    })
  },
  created () {},
  mounted () {},
  methods: {
    handleMenuTheme (theme) {
      this.$store.dispatch('app/ToggleTheme', theme)
    },
    handleLayout (mode) {
      this.$store.dispatch('app/ToggleLayoutMode', mode)
    },
    changeColor (color) {
      if (this.primaryColor !== color) {
        this.$store.dispatch('app/ToggleColor', color)
        updateTheme(color)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.setting-drawer {
  .setting-drawer-index-blockChecbox {
    display: flex;
    .setting-drawer-index-item {
      margin-right: 16px;
      position: relative;
      border-radius: 4px;
      cursor: pointer;
      img {
        width: 48px;
      }
      .setting-drawer-index-selectIcon {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        padding-top: 15px;
        padding-left: 24px;
        height: 100%;
        color: #1890ff;
        font-size: 14px;
        font-weight: 700;
      }
    }
  }
  .setting-drawer-theme-color-colorBlock {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    float: left;
    cursor: pointer;
    margin-right: 8px;
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    i {
      font-size: 14px;
    }
  }
}
</style>
